<template>
  <div class="form-make-wrap">
    <Left :process-list="processList" @quoteProcess="quoteProcess"/>
    <Middle v-model="formOptions" />
    <Right :fixed-id="fixedId" v-model="formOptions" @statusCheck="statusCheck" />
  </div>
</template>

<script>
import Left from './left';
import Middle from './middle';
import Right from './right';
export default {
  name: 'FormMake',
  components: { Left, Middle, Right },
  model: {
    prop: 'formOptions',
    event: 'change'
  },
  props: {
    formOptions: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100,
            labelPosition: 'right',
            keyToFormula: {} // 公式字段的映射表（被引用的字段: 引用它的公式字段）
          }
        };
      }
    },
    processList: { // 流程列表
      type: Array,
      default: () => []
    },
    fixedId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
    };
  },
  methods: {
    quoteProcess(val) {
      this.$emit('quoteProcess', val);
    },
    statusCheck() {
      this.$emit('statusCheck');
    }
  }
};
</script>

<style lang="scss" scoped>
.form-make-wrap {
  display: flex;
  // height: 100%;
  height: calc(100vh - 48px);
  overflow: hidden;
}
</style>
